<template>
  <div class="block">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 营销报表管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <span class="demonstration">营销报表:</span>
    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
    </el-date-picker>

    <el-date-picker
        style="margin-left:20px"
        v-model="value2"
        type="date"
        placeholder="选择日期">
    </el-date-picker>
    <el-button size="mini" @click="search()" type="primary" style="margin-left: 30px">
      查看
    </el-button>
    <el-button size="mini" type="primary" style="margin-left: 40px" @click="exportExcelSelect()">
      导出EXCEL
    </el-button>
    <el-divider></el-divider>
<!-- 数据表格-->
    <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center" width="80"></el-table-column>
      <el-table-column prop="checkInDate" label="入住时间" align="center" width="120"></el-table-column>
      <el-table-column prop="checkOutDate" label="离店时间" align="center" width="120"></el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="80"></el-table-column>
      <el-table-column prop="orderSale" label="订单总金额" align="center" width="120"></el-table-column>
    </el-table>
    <!--预览弹窗表格-->
    <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
      <el-table :data="selectData" id="selectTable" height="380px">
        <el-table-column prop="id" label="ID" align="center" width="80"></el-table-column>
        <el-table-column prop="checkInDate" label="入住时间" align="center" width="120"></el-table-column>
        <el-table-column prop="checkOutDate" label="离店时间" align="center" width="120"></el-table-column>
        <el-table-column prop="price" label="价格" align="center" width="80"></el-table-column>
        <el-table-column prop="orderSale" label="订单总金额" align="center" width="120"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcel">确定保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      value1:"",
      value2:"",
      tableData:[],
      //表格中选择的数据
      selectData:[],
      selectWindow:false
    };
  },
  methods:{
    search() {
      let url='http://localhost:9999/table/saleTable2';
      // 将 ISO 8601 格式的时间转换为本地时间
      let startTime = new Date(this.value1).toLocaleString();
      let endTime = new Date(this.value2).toLocaleString();
      this.axios.get(url,{params:{startTime:startTime,endTime:endTime}}).then((response)=>{
        if (response.data.state ==20000){
          this.tableData=response.data.data;
          if (this.tableData.length>1){
            this.$message.error('操作成功！！！');
          }
        }else if (response.data.state ==40400){
          this.$message.error(response.data.message);
        }else{
          console.log('其他状态码的处理');
          // 可以添加对其他状态码的处理逻辑
        }
      }).catch((error) => {
        // 请求失败或返回非2xx和404状态码的处理
        this.$message.error('请求失败');
        console.log('请求错误:', error);
      })
    },
    //格式化数据
    getExcel(dom,title ='默认标题',){
      var excelTitle = title;
      var wb = XLSX.utils.table_to_book(document.querySelector(dom));
      //获取二进制字符串作为输出
      var wbot = XLSX.write(wb,{bookType:"xlsx",bookSST:true,type:"array"});
      try {
        FileSaver.saveAs(
            new Blob([wbot],{type:"application/octet-stream"}),
            excelTitle + ".xlsx"
        );
      }catch (e){
        if (typeof console !== "undefined") console.log(e,wbot);
      }
      return wbot;
    },
    //导出
    exportExcel(){
      this.getExcel('#selectTable','营销报表')
    },
    //显示预览弹窗
    exportExcelSelect(){
      if (this.selectData.length<1){
        this.$message.error('请选择要导出的内容!');
        return false;
      }
      this.selectWindow=true;
    },
    //选中数据
    handleSelectionChange(val){
      this.selectData = val;
    }
  },
  created() {
    let url = 'http://localhost:9999/table/saleTablex'
    this.axios.get(url).then((response)=>{
      this.tableData = response.data.data;

    })
  }
};
</script>

<style scoped>

</style>